import React, { useEffect, useState } from "react";
import styles from './index.less'
import { values } from "lodash";
interface lp {
    value: [];
    onChange: (value: any) => void;

}

const PriceRangeForm: React.FC<lp> = (props) => {
    const { onChange } = props;
    const [result, setvalue] = useState<any>([]);
    const handleBlur = () => {
        setTimeout(() => {
           
            if (Number(result[0]) > Number(result[1])) {
                const ret = [result[1], result[0]]
                setvalue(JSON.parse(JSON.stringify(ret)));
                

            }
        })
    };


    // useEffect(() => {
    //     if (value.length > 5) {
    //         setMaxPrice("");
    //         setMinPrice("");
    //     }

    // }, [value]);
// console.log(result)

    return (
        // <form>

            <div className={styles.priceArea}>
                <input type="number" dir="rtl"
                    className={styles.input}
                    placeholder="最低价"
                    value={result[0]}
                    onChange={(e) => {
                        const result1 = [...props.value]
                        result1[0] = e.target.value 
                        setvalue(JSON.parse(JSON.stringify(result1)))
                        onChange(result1)
                    }}
                    onBlur={handleBlur}
                />
                <span className={styles.middle}>~ </span>
                <input type="number" dir="ltr"
                    className={styles.input}
                    value={result[1]}
                    placeholder="最高价"
                    onChange={(e) => {
                        const result2 = [...props.value]
                        result2[1] = e.target.value
                        setvalue(JSON.parse(JSON.stringify(result2)))
                        onChange(result2)
                    }}
                    onBlur={handleBlur}
                />
            </div>




        // </form>
    );
};

export default PriceRangeForm;
